<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">附件信息</div>
                    <div class="layui-card-body">
                        <div style="margin-bottom: 10px;">
                            <div class="layui-input-item" style="float:left;padding-right:10px;">
                                <form class="layui-form">
                                    <div class="layui-inline" style="width:130px;">
                                        <select id="search-tunnel" lay-filter="search-tunnel" lay-search>
                                            <option value="">请选择建筑群</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline" style="width:130px;">
                                        <select id="search-system" lay-search>
                                            <option value="">选择设备系统</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline" style="width:130px;">
                                        <select id="search-device-type" lay-search>
                                            <option value="">选择设备类型</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline" style="width:130px;">
                                        <select id="search-deviceId" lay-search>
                                            <option value="">选择设备</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline" style="width:130px;">
                                        <input id="search-name" type="text" placeholder="请输入附件名称"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline" style="width:130px;">
                                        <input id="search-brand" type="text" placeholder="请输入品牌"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline" style="width:130px;">
                                        <input id="search-model" type="text" placeholder="请输入型号/规格"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline" style="width:130px;">
                                        <input id="product-range" type="text" placeholder="选择生产日期范围"
                                            class="layui-input">
                                    </div>
                                </form>
                            </div>
                            <div style="float:right;">
                                <button id="search-btn" class="layui-btn">查找</button>
                                <button id="accessory-add-btn" class="layui-btn">添加</button>
                                <!-- <button id="accessory-clear-btn" class="layui-btn layui-btn-primar">清空</button> -->
                                <button id="accessory-refresh-btn" class="layui-btn layui-btn-primary">刷新
                                </button>
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                        <table class="layui-hide" id="accessory-table" lay-filter="accessory-table"></table>
                        <script type="text/html" id="accessory-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="replace">更换记录</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--附件信息-->
    <script type="text/html" id="accessory-form">
    <div class="layui-card">
        <div class="layui-card-header">设备附件</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="accessory-form">
                <input type="hidden" name="id">
                <input type="hidden" name="deviceId">
                <div class="layui-form-item">
                    <label class="layui-form-label">备件台账</label>
                    <div class="layui-input-block">
                        <select id="search-spareparts" lay-filter="search-spareparts" lay-search>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属设备</label>
                    <div class="layui-input-block">
                        <select id="search-deviceId-form" name="deviceId" lay-search>
                            <option value="">请选择设备</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*附件名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="accessory-name" name="name" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌</label>
                    <div class="layui-input-block">
                        <input type="text" id="accessory-brand" name="brand" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">型号/规格</label>
                    <div class="layui-input-block">
                        <input type="text" id="accessory-model" name="model" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-block">
                        <input type="number" name="quantity" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="unit" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出厂编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="productNo" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生产日期</label>
                    <div class="layui-input-block">
                        <input id="product-date" type="text" name="productDate" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">使用年限</label>
                    <div class="layui-input-block">
                        <input type="number" name="serviceYears" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="note" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit
                            lay-filter="accessory-form-submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</script>

    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/clipboard.min.js"></script>
    <script src="/js/common.js"></script>
    <script>

        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laytpl', 'upload', 'laydate'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var admin = layui.admin;
            // var deviceId = getParam("id");
            var device;
            var popupIndex;
            var upload = layui.upload;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#product-range',
                range: true
            });

            loadDeviceSystems(function (result) {
                for (var i in result) {
                    var item = result[i];
                    $('#search-system').append('<option value="' + item.name + '">' + item.name + '</option>');
                }
                form.render();
            });

            loadDeviceTypes(function (result) {
                for (var i in result) {
                    var item = result[i];
                    $('#search-device-type').append('<option value="' + item.name + '">' + item.name + '</option>');
                }
                form.render();
            });

            loadTunnels(function (result) {
                for (var i in result) {
                    var item = result[i];
                    $('#search-tunnel').append('<option value="' + item.id + '">' + item.name + '</option>');
                }
                form.render();
            });

            loadDevices(function (result) {
                for (var i in result) {
                    var item = result[i];
                    $('#search-deviceId').append('<option value="' + item.id + '">' + item.name + '</option>');
                }
                form.render();
            });

            function loadSpareparts(callback) {
                $.get('spareparts', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadTunnels(callback) {
                $.get('tunnels', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadLocations(tunnelId, callback) {
                $.get('locations/', { tunnelId }, function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadDeviceSystems(callback) {
                $.get('/device-systems', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadDeviceTypes(callback) {
                $.get('/device-types', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadDevices(callback) {
                $.get('/devices', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }


            // loadDeviceInfo();

            /**
             * 加载设备信息
             */
            function loadDeviceInfo() {
                $.ajax({
                    url: "devices",
                    success: function (result) {
                        if (result.code == 0 && result.data) {
                            console.log('item');
                            var data = result.data;
                            device = data;
                            data.forEach(function (item) {
                                $('#deviceList').append('<option value="' + item.id + '">' + item.name + '</option>');
                            });

                        } else {
                            layer.msg('平台无此设备');
                        }
                    }
                });
            }

            function loadStations(callback) {
                $.get('/iot-stations', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadRemoteIoTDevices(stationId, callback) {
                $.get('/remote-iot-devices', { stationId }, function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function showAccessoryForm(data) {
                popupIndex = admin.popupRight({
                    area: '560px',
                    success: function () {
                        var formHtml = $('#accessory-form').html();
                        $('#' + this.id).html(formHtml);
                        laydate.render({
                            elem: '#product-date'
                        });
                        // form.render();
                        console.log('data===========>', data);
                        loadSpareparts(function (result) {
                            let searchSparepartsValue = ''
                            if (data) {
                                searchSparepartsValue = (data.name || '') + '|' + (data.brand || '') + '|' + (data.model || '');
                            } else {
                                $('#search-spareparts').append('<option value="">请选择备件</option>');
                            }
                            for (var i in result) {
                                var item = result[i];
                                var name = (item.name || '') + '|' + (item.brand || '') + '|' + (item.model || '');
                                $('#search-spareparts').append('<option value="' + name + '">' + name + '</option>');
                                if (name == searchSparepartsValue)
                                    $('#search-spareparts').val(name)
                            }
                            form.render();

                            form.on('select(search-spareparts)', function (data) {
                                var value = data.value;
                                var str = value.split("|");
                                // console.log('=============>',value);
                                $('#accessory-name').val(str[0]);
                                $('#accessory-brand').val(str[1]);
                                $('#accessory-model').val(str[2]);
                            });

                        });
                        // form.render();
                        loadDevices(function (result) {
                            if (data) {
                                form.val('accessory-form', data);
                            }
                            for (var i in result) {
                                var item = result[i];
                                $('#search-deviceId-form').append('<option value="' + item.id + '">' + item.name + '</option>');
                                if (data && data.deviceId == item.id) {
                                    $('#search-deviceId-form').val(item.id);
                                    // form.val('accessory-form', data);
                                }
                            }

                            form.render();
                        });

                        form.render();
                    }
                });
                return popupIndex
            }


            function closePopupForm() {
                if (popupIndex) {
                    layer.close(popupIndex);
                }
            }

            /*表格加载区*/

            table.render({
                elem: '#accessory-table',
                url: 'accessories',
                title: '附件信息',
                skin: 'line',
                cols:
                    [
                        [
                            {
                                title: '序号', width: 60, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1;
                                }
                            },
                            { field: 'deviceCode', title: '设备编号', width: 200 },
                            { field: 'tunnelName', title: '建筑群', width: 120 },
                            { field: 'system', title: '设备系统', width: 120 },
                            { field: 'locationName', title: '区域简称', width: 120 },
                            { field: 'deviceType', title: '设备类型', width: 120 },
                            { field: 'no', title: '设备代号', width: 120 },
                            { field: 'abbr', title: '设备简称', width: 120 },
                            { field: 'name', title: '附件名称', width: 120 },
                            { field: 'brand', title: '品牌', width: 120 },
                            { field: 'model', title: '型号/规格', width: 120 },
                            { field: 'unit', title: '单位', width: 120 },
                            { field: 'quantity', title: '数量', width: 120 },
                            { field: 'productNo', title: '出厂编号', width: 120 },
                            { field: 'productDate', title: '生产日期', width: 120 },
                            { field: 'serviceYears', title: '使用年限', width: 120 },
                            { field: 'note', title: '备注' },
                            { fixed: 'right', title: '操作', toolbar: '#accessory-toolbar', width: 220 }
                        ]
                    ],
                // where: {
                //     deviceId: deviceId
                // },
                where: {
                    tunnelId: $('#search-tunnel').val(),
                    system: $('#search-system').val(),
                    deviceType: $('#search-device-type').val(),
                    name: $('#search-name').val(),
                    brand: $('#search-brand').val(),
                    model: $('#search-model').val(),
                    deviceId: $('#search-deviceId').val(),
                    productRange: $('#product-range').val()
                },
                page: true
            });

            function search() {
                table.reload('accessory-table', {
                    where: {
                        tunnelId: $('#search-tunnel').val(),
                        system: $('#search-system').val(),
                        deviceType: $('#search-device-type').val(),
                        name: $('#search-name').val(),
                        brand: $('#search-brand').val(),
                        model: $('#search-model').val(),
                        deviceId: $('#search-deviceId').val(),
                        productRange: $('#product-range').val()
                    },
                    page: {
                        curr: 1
                    }
                });
            }

            $("#search-btn").on('click', function () {
                search();
            });


            table.on('tool(accessory-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该数据吗？', function (index) {
                        $.ajax({
                            url: "accessories/" + data.id,
                            method: "DELETE",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('accessory-table');
                                } else {
                                    layer.alert(result.msg, {
                                        skin: 'layui-layer-molv'
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showAccessoryForm(data);
                } else if (obj.event === 'replace') {
                    layer.open({
                        title: '附件更换记录',
                        type: 2,
                        content: 'device-accessory-replace.html?accessoryId=' + data.id,
                        area: ['960px', '620px'],
                        maxmin: true
                    });
                }
            });


            table.on('tool(replace-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.open({
                        title: '设备更换详情',
                        type: 2,
                        content: 'device-replace-info.html?id=' + data.id,
                        area: ['960px', '620px'],
                        maxmin: true
                    });
                }
            });

            table.on('tool(repair-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.open({
                        title: '维修工单详情',
                        type: 2,
                        content: 'repair-info.html?id=' + data.id,
                        area: ['960px', '620px'],
                        maxmin: true
                    });
                }
            });

            table.on('tool(fault-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.open({
                        title: '缺陷详情',
                        type: 2,
                        content: 'fault-info.html?id=' + data.id,
                        area: ['960px', '620px'],
                        maxmin: true
                    });
                }
            });

            form.on('submit(accessory-form-submit)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                console.log(data);

                // data.field.deviceId = deviceId;
                $.ajax({
                    url: 'accessories',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('accessory-table');
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                closePopupForm();
                return false;
            });


            /**
             * 添加按钮
             */
            $("#accessory-add-btn").on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                showAccessoryForm();
            });


            /**
             * 清空按钮
             */
            $('#accessory-clear-btn').on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的清空该设备的附件信息吗？', {
                    skin: 'layui-layer-molv'
                }, function (index) {
                    $.ajax({
                        url: 'accessories',
                        // data: { deviceId },
                        method: "DELETE",
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('清空成功');
                                table.reload('accessory-table');
                            } else {
                                layer.alert(result.msg, {
                                    skin: 'layui-layer-molv'
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            });


            /**
             * 刷新按钮
             */


            $('#accessory-refresh-btn').on('click', function () {
                table.reload('accessory-table', {
                    // where: {
                    //     deviceId: deviceId
                    // }
                });
            });

        });
    </script>
</body>

</html>